﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Morbo the Annihillator</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<script type="text/javascript" src="pseudo2.js"></script>
<style type="text/css">
fieldset.texts label:before,
fieldset.selects label:before {
	content: "clear";
	display: block;
	clear: left;
	width: 0px;
	height: 0px;
	font-size: 0px;
	visibility: hidden;
}
</style>
</head>
<body>
	<h1>Pseudo test case: forms</h1>
	<dl style="float:right">
		<dt onclick="document.forms[0].state()">document.forms[0].state()</dt>
		<dd>Saves the disabled states of the form elements for later when re-enabling</dd>
		<dt onclick="document.forms[0].disable()">document.forms[0].disable()</dt>
		<dd>disables the form and saves state</dd>
		<dt onclick="document.forms[0].disable(true)">document.forms[0].disable(true)</dt>
		<dd>disables the form; does not save state</dd>
		<dt onclick="document.forms[0].enable()">document.forms[0].enable()</dt>
		<dd>enables the form from saved state; if no state was set then enables form element</dd>
		<dt onclick="document.forms[0].enable(true)">document.forms[0].enable(true)</dt>
		<dd>enables the form from regardless of state</dd>
		<dt onclick="console.log(document.forms[0].data())">console.log(document.forms[0].data())</dt>
		<dd>provides an object representing the form element values</dd>
		<dt onclick="console.log(document.forms[0].data('joined'))">console.log(document.forms[0].data("joined"))</dt>
		<dd>provides an object representing the form element values; all values are strings, all strings are comma separated for names with multiple values</dd>
		<dt onclick="console.log(document.forms[0].data('query'))">console.log(document.forms[0].data("query"))</dt>
		<dd>provides a query string ready for submitting via POST or GET</dd>
	</dl>
	<form action="" method="get">
		<fieldset class="texts">
			<legend>inputs</legend>
			<label for="it1">text one</label><input type="text" id="it1" name="it1" value="one" />
			<label for="it2">text two</label><input type="text" id="it2" name="it2" disabled="disabled" value="two" />
			<label for="it3">text three #1</label><input type="text" id="it3" name="it3" value="text three #1" />
			<label for="it4">text three #2</label><input type="text" id="it4" name="it3" value="text three #2" />
			<label for="it5">text five</label><input type="text" id="it5" name="it5" value="five" />
			
			<label for="ip1">password one</label><input type="password" id="ip1" name="ip1" value="one" />
			<label for="ip2">password two</label><input type="password" id="ip2" name="ip2" disabled="disabled" value="two" />
			<label for="ip3">password three #1</label><input type="password" id="ip3" name="ip3" value="password three #1" />
			<label for="ip4">password three #2</label><input type="password" id="ip4" name="ip3" value="password three #2" />
			<label for="ip5">password five</label><input type="password" id="ip5" name="ip5" value="five" />
		</fieldset>
		<fieldset class="checkbox">
			<legend>radoi and checkbox</legend>
			<ul>
				<li><label><input type="radio" name="ir1" value="radio1" checked="checked" />one</label></li>
				<li><label><input type="radio" name="ir1" value="radio2" />two</label></li>
				<li><label><input type="radio" name="ir1" value="radio3" disabled="disabled" />three</label></li>
				<li><label><input type="radio" name="ir1" value="radio4" />four</label></li>
			</ul>
			<ul>
				<li><label><input type="checkbox" name="ic1" value="check1" checked="checked" />checkbox one</label></li>
				<li><label><input type="checkbox" name="ic2" value="check2" />checkbox two</label></li>
				<li><label><input type="checkbox" name="ic3" value="check3" />checkbox three #1</label></li>
				<li><label><input type="checkbox" name="ic3" value="check4" />checkbox three #2</label></li>
				<li><label><input type="checkbox" name="ic5" value="check5" checked="checked" disabled="disabled" />checkbox five</label></li>
			</ul>
		</fieldset>
		<fieldset class="selects">
			<legend>selects</legend>
			<label for="se1">select one</label>
			<select id="se1">
				<option value="1">one</option>
				<option value="2">two</option>
				<option value="3" selected="selected">three</option>
				<option value="4">four</option>
			</select>
			<label for="se1">select two</label>
			<select id="se2" name="se2">
				<option value="5">five</option>
				<option value="6" selected="selected">six</option>
				<option value="7">seven</option>
				<option value="8">eight</option>
			</select>
			<label for="se1">select three #1</label>
			<select id="se3" name="se3" size="4" multiple="multiple">
				<option value="9" selected="selected">nine</option>
				<option value="10">ten</option>
				<option value="11" selected="selected">eleven</option>
				<option value="12" selected="selected">twelve</option>
			</select>
			<label for="se1">select three #2</label>
			<select id="se4" name="se3">
				<optgroup label="too young to drive">
					<option>thirteen</option>
					<option>fourteen</option>
					<option>fifteen</option>
				</optgroup>
				<optgroup label="old enough to drive">
					<option selected="selected">sixteen</option>
				</optgroup>
			</select>
		</fieldset>
		<fieldset class="textareas">
			<legend>textareas</legend>
			<textarea id="ta1" cols="9" rows="4">the text from the first textarea</textarea>
			<textarea id="ta2" cols="9" rows="4" name="ta2">and the second</textarea>
			<textarea id="ta3" cols="9" rows="4" name="ta3">textarea third #1</textarea>
			<textarea id="ta4" cols="9" rows="4" name="ta3">textarea third #2</textarea>
			<textarea id="ta5" cols="9" rows="4" name="ta5" disabled="disabled">fifth</textarea>
		</fieldset>
		<fieldset class="buttons">
			<legend>buttons</legend>
			<button name="bt1" type="button" disabled="disabled">button</button>
			<button name="bt2" type="reset">reset</button>
			<button name="bt3" type="submit">submit</button>
			<input name="bt4" type="submit" value="submit" />
			<input name="bt5" type="button" value="button" />
		</fieldset>
	</form>
</body>
</html>